<script setup>
import { getCurrentInstance, reactive,ref } from 'vue'
import mvImg from "@/components/mvImg.vue"
import mvSuggest from "@/components/newMv.vue"
const {proxy} = getCurrentInstance()
const loading = ref(true)
const newMv = reactive({})
proxy.$https.newMv()
.then((res)=>{
    const arr = res.data.data
     arr.splice(0,2)
     newMv.value = arr
    loading.value=false 
})
</script>


<template>
    <mvSuggest
    :loading="loading"
    ></mvSuggest>
    <main>
        <header>
            <h2 v-show="!loading">热门</h2>
            <div class="flex flex-wrap gap-2">
            </div>
        </header>
        <div class="card"  >
            <mvImg 
            v-for="item in newMv.value"
            :url = item.cover
            :id = item.id
            :name = item.name
            :artistName = item.artistName
            :playCount = item.playCount
            :loading="loading">
        </mvImg>
        </div>
    </main>
</template>


<style scoped>
main{
    margin-bottom: 30px;
}
header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.mx{
    background-color: black;
    color: aliceblue;
}
main h2 {
    font-weight: 600;
}

main .card{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}

.el-tag{
    cursor: pointer;
}

#p{
    width: 1240px;
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: pink;
    font-size: 50px;
    font-weight: 700;
}
</style>